body{
    background-color: whitesmoke;
    color: #555555;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;

}
.box1{
    background-color: antiquewhite;
    color: royalblue;

    border: 5px solid blue;
    border-left:5px solid grey;
    border-bottom: 3px firebrick double;
    border-bottom-style: dashed;

    padding-left: 20px;
}
.box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    /* italic斜体 */
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 1em;
    word-spacing: 2em;
}
.box2{
    border:5px dotted #cccccc;
    padding: 20px;
    margin: 20px;
    border-radius: 35px;

}
.box2 h1{
    text-align: center;
}
.list li{
    list-style-image: url(../../img/icon1.jpg);
}
.container{
    width: 80%;
    margin: auto;
}
button{
    background-color: #444444;
    color: #ffffff;
    padding:10px 15px;
}
button:hover{
    background-color:white;
    color: black;
}
button:active{
    background-color: green;
}
a{
    text-decoration-line: none;
    color: black;
    columns: #555555;
}
a:hover{
    text-decoration-line: underline;
    background-color: grey;
    color: white;
}
a:active{
    text-decoration-line: none;
    background-color: green;
    color: white;
}
.block{
    float: left;
    width: 33.3%;
    border: 1px solid;
    /* box-sizing让边框不占用大小 */
    box-sizing: border-box;
}
#main-block{
    float: left;
    width: 70%;
    border: 1px solid red;
    box-sizing: border-box;
}
#side-bar{
    float: right;
    width: 30%;
    border: 1px solid yellow;
    box-sizing: border-box;
}
/* 高级选择器 */
.list2 li:nth-child(even){
    background-color: grey;
}
.list2 li:first-child{
    background-color: red;
}
.list2 li:nth-child(3){
    background-color: saddlebrown;
}

/* 
    定位
    static静态定位
    relative相对定位
    absolute绝对定位
    fixed固定定位,相对于浏览器位置不变
    sticky(导航栏随着滚动固定在屏幕的某个位置)
    stick要超过一定阈值才会出现fix效果，所以要确定上下左右其中的一个值

    inherit继承父类的定位
*/
.position-box{
    width: 70%;
    height: 1000px;
    margin:auto;
    
    border: 1px solid red;
    text-align: center;


}
.position-box h1{
    /*
     这种效果可以制作导航栏 
     sticky要加上下左右中至少一个具体的数值，否则跟relative一样效果
    */
    position:sticky;
    top: 20px;

    padding:10px;

}
.father-box{
    width: 80%;
    height: 800px;
    margin: auto;
    margin-top: 40px;
    background-color:yellow;
}
.child-box1{
    width: 20%;
    height: 100px;
    background-color: teal;
    /*
        relative就是让子元素相对父元素进行定位
    */
    position: relative;
    top:20px;
    left:20px;
}
.child-box2{
    width: 20%;
    height: 100px;
    background-color: blueviolet;
    /*
        同样是子元素，使用absolute就是以页面定位
    */
    position: absolute;
    top:20px;
    left:20px;
}